<template>
    <view>
        <el-card style="height:84vh">
            <el-form :model="form" label-width="50px">
                <!-- <el-form-item label="经营者"><el-input v-model="form.operator" style="width:280px" /></el-form-item> -->
                <!-- <el-form-item label="油田或气田"><el-input v-model="form.field" style="width:280px" /></el-form-item> -->
                <!-- <el-form-item label="位置"><el-input v-model="form.location" style="width:280px" /></el-form-item> -->

                <GdMap :longitude="form.longitude" :latitude="form.latitude" @setAddress="setAddress"
                    @setLnglat="setLnglat"></GdMap>

                <el-link></el-link>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="纬度"><el-input-number v-model="form.latitude" controls-position="right" :step="0.0001" 
                                style="width:100%" /></el-form-item>
                    </el-col>

                </el-row>
                <el-row><el-col :span="24">
                        <el-form-item label="经度"><el-input-number v-model="form.longitude" controls-position="right" :step="0.0001" 
                                style="width:100%" /></el-form-item>
                    </el-col></el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="井号"><el-input v-model="form.uwi" style="width:100%"
                                placeholder="请输入井号" /></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="井名"><el-input v-model="form.name" style="width:100%"
                                placeholder="请输入井名" /></el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label-width="10px"><el-input v-model="form.province" placeholder="省"
                                style="width:100%" /></el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label-width="10px"><el-input v-model="form.city" placeholder="市"
                                style="width:100%" /></el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label-width="10px"><el-input v-model="form.district" placeholder="区"
                                style="width:100%" /></el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row><el-col :span="12"><el-form-item label="硫化氢" label-width="100px"><el-checkbox
                                v-model="form.h2s" /></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="二氧化碳" label-width="100px"><el-checkbox v-model="form.co2" /></el-form-item></el-col>
                </el-row> -->
                <el-row><el-button type="primary" style="width:100%">提交</el-button></el-row>
            </el-form>

            <!-- <div  id="container" ref="mapRef"></div> -->
        </el-card>
    </view>
</template>
<script setup>
import GdMap from '@/components/Map/index'
const form = reactive({
    operator: '',
    field: '',
    location: '',
    province: '',
    state: '',
    country: '',
    district: '',
    latitude: 44,
    longitude: 124,
    uwi: '',
    name:'',
    h2s: false,
    co2: false
})
function setAddress(e) {
    form.country = e.country
    form.province = e.province
    form.city = e.city
    form.district = e.district
}
function setLnglat(e) {
    console.log(e)
    form.latitude = e.lat
    form.longitude = e.lng
}

</script>
